<script setup lang="js">
import { ref, onMounted } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import anlyze from '../../apis/anlyze.js'

const taskList = ref([])
const loading = ref(false)
const error = ref(null)

const fetchTaskList = async () => {
  try {
    loading.value = true
    error.value = null
    const res = await anlyze.getTaskToDayCreatedList()
    taskList.value = res
  } catch (err) {
    console.error('获取任务数据失败:', err)
    error.value = '获取任务数据失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchTaskList()
})
</script>

<template>
  <div class="task-list-wrapper">
    <div class="list-header">
      <h2>今日任务信息</h2>
    </div>

    <div v-if="loading" class="loading-state">
      数据加载中...
    </div>

    <div v-else-if="error" class="error-state">
      {{ error }}
      <button @click="fetchTaskList" class="retry-btn">重试</button>
    </div>

    <div v-else-if="taskList.length === 0" class="empty-state">
      今日暂无任务数据
    </div>

    <div v-else class="list-table-wrapper">
      <div class="table-header">
        <div class="header-cell requester">请求人</div>
        <div class="header-cell receiver">接受人</div>
        <div class="header-cell time">预约时间</div>
        <div class="header-cell content">任务内容</div>
      </div>

      <div class="table-body">
        <Vue3SeamlessScroll
            :list="taskList"
            :hover="true"
            :step="0.3"
            :limitScrollNum="5"
            :wheel="true"
            class="scroll-wrapper"
        >
          <div
              v-for="(item, index) in taskList"
              :key="item.taskId || index"
              class="table-row"
          >
            <div class="cell requester">{{ item.requesterName }}</div>
            <div class="cell receiver">
              {{ item.receiverName || '暂未接受' }}
            </div>
            <div class="cell time">{{ item.appointmentTime }}</div>
            <div class="cell content">{{ item.taskContent }}</div>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.task-list-wrapper {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .list-header {
    text-align: center;
    margin-bottom: 12px;

    h2 {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin: 0;
    }
  }

  .loading-state,
  .error-state,
  .empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
  }

  .error-state {
    color: #f56c6c;
    flex-direction: column;
    gap: 10px;

    .retry-btn {
      padding: 5px 15px;
      background: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #66b1ff;
      }
    }
  }

  .list-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-header {
      display: flex;
      padding: 10px 15px;
      background-color: #f5f7fa;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid #e4e7ed;

      .header-cell {
        flex: 1;
        text-align: center;
        font-size: 14px;

        &.requester {
          flex: 1.2;
        }

        &.receiver {
          flex: 1.2;
        }

        &.time {
          flex: 2;
        }

        &.content {
          flex: 3;
        }
      }
    }

    .table-body {
      flex: 1;
      overflow: hidden;

      .scroll-wrapper {
        height: 100%;
        overflow: hidden;

        .table-row {
          display: flex;
          padding: 12px 15px;
          color: #606266;
          font-size: 14px;
          text-align: center;
          align-items: center;

          &:nth-child(odd) {
            background-color: #fafafa;
          }

          &:nth-child(even) {
            background-color: #ffffff;
          }

          .cell {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 5px;

            &.requester {
              flex: 1.2;
            }

            &.receiver {
              flex: 1.2;
            }

            &.time {
              flex: 2;
            }

            &.content {
              flex: 3;
            }
          }
        }
      }
    }
  }
}
</style>